<template>
  <div class="footer">
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item
        v-for="e in tabbarList"
        :key="e.name"
        :badge="e.badge ? e.badge : undefined"
      >
        <span style="font-weight: 500">{{ e.name }}</span>
        <template #icon="props">
          <img
            :src="props.active ? e.icon.active : e.icon.inactive"
          /> </template
      ></van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useAppStore } from "@/store/useAppStore";
import { useRouter, useRoute } from "vue-router";
import a from "@/assets/images/fkdj.png";
import a1 from "@/assets/images/fkdj1.png";
import c from "@/assets/images/ewm.png";
import c1 from "@/assets/images/ewm1.png";
const appStore = useAppStore();
const { changeIndex } = appStore;
const router = useRouter();
const route = useRoute();
watch(
  () => route.fullPath,
  (params) => {
    if (params == "/ewm") {
      active.value = 0;
    }
    if (params == "/vistor") {
      active.value = 1;
    }
  },
  {
    deep: true,
  }
);

const tabbarList = [
  {
    name: "邀请码",
    icon: {
      active: c1,
      inactive: c,
    },
  },
  {
    name: "访客审核",
    icon: {
      active: a1,
      inactive: a,
    },
  },
] as any;
const active = ref(0);
const routerTofoot = {
  0: "/qr",
  1: "/visitor",
} as any;

const onChange = (index: number) => {
  router.push(routerTofoot[active.value]);
  changeIndex(index);
};
</script>

<style scoped>
img {
  width: 26px;
  height: 26px;
}
.footer {
  margin-top: 50px;
}
</style>
